<template>
  <div id='tmpl'>
    <div class="row" v-for='(item,index) in datalist' :key="index">
			<mt-switch class="switch" v-model="value[index]" ></mt-switch>
			<img class="img" :src='item.thumb_path' alt="商品图片" >
			<div class="inforight">
				<h4>{{item.title}}</h4>
				<div class="bottom">
					<ul>
						<li>￥{{item.sell_price}}</li>
						<li><carinputnumber :initCount='item.cou' :goodsid='item.id' v-on:cardataObj='getinputNumber'></carinputnumber></li>
						<li><a href="javascript:void(0)" @click="delrow(item.id,index)">删除</a></li>
					</ul>

				</div>
			</div>
		</div>

		<div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品{{totalcount}}件,总价:￥{{totalAmount}}元</li>
				</ul>
			</div>
			<div id="button">
				<mt-button  type="danger" size="small">去结算</mt-button>
			</div>
		</div>
  </div>
</template>
<script>
import common from '../../kikt/comment.js';
import { Toast } from 'mint-ui';
import {getgoodsObj,updataData,removeItem} from '../../kikt/local.js'
import carinputnumber from '../subcomment/carinputnumber.vue'
export default {
    components:{
        carinputnumber
    },
  data () {
    return {
		totalAmount:0,
        datalist:[],
		value:[]
    };
  },
  computed:{
	//定义计算总数量的属性
	
	totalcount(){
		// 计算逻辑：只需要计算出this.value数组中的ture值有多少个即可
		var trueArr = this.value.filter(function(item){return item});
		// 计算出当前选中的商品的总价格
		//计算方式： 当前商品的购买数量 * 商品的单价 （其中两个值均从this.datalist中来）
		var amount = 0;
		var then = this;
		this.value.forEach(function(item,index) {
			if(item){
				
				var count = then.datalist[index].cou;
				var price = then.datalist[index].sell_price;
				var itemamount =   count * price;
				amount += itemamount;
			}	
		});
		this.totalAmount = amount;
		return trueArr.length;
	}
  },
  created(){
    this.getdatalist()
  },
  methods:{
      getdatalist(){
          var isid = '';
          var obj = getgoodsObj();
          for(var key in obj){
              isid += key + ','
          }
          isid = isid.substring(0,isid.length-1);
          var url = common.apidomain +'/api/goods/getshopcarlist/' + isid;
          this.$http.get(url).then(function(res){
			  var then = this;
              if(res.body.status != 0){
                  Toast(res.body.message);
                  return;
              }
			  // 将locaStorage中的所有的商品对应的count的值赋值给message中每个对象的cou
			  res.body.message.forEach(function(item){
				  item.cou = obj[item.id];
				  // 为了解决一个bug所以必须在此处初始化values数组全部为false
				  then.value.push(false)
			  })
              this.datalist = res.body.message
          })
      },
	  //获取数量组件中返回的内容
	  getinputNumber(resObj){
		  //更新local中的数据
		updataData(resObj);
		//更新this.datalist中的数据
		for(var i = 0;i<this.datalist.length;i++){
			if(this.datalist[i].id==resObj.goodsid){
				if(resObj.type == 'add'){
					this.datalist[i].cou = this.datalist[i].cou +1;
				}else{
					this.datalist[i].cou = this.datalist[i].cou - 1;
				}
				break
			}
		}
	  },
	  //删除一行数据
	  delrow(goodsid,index){
		// 1.0 将this.value数组中的index这个位置的值移除(当移除了这个值的时候就会自动触发计算属性totalcount的执行)
				this.value.splice(index,1);
				// 2.0 将this.datalist中的index这个位置的值移除(当移除了这个值的时候就会自动触发计算属性totalcount的执行)
				this.datalist.splice(index,1);
				// 3.0 将localStroage中的goodsid对应的所有值移除
				removeItem(goodsid);
	  }
  }
}
</script>
<style lang="css" scoped>
    .row{
		border-bottom: 1px solid rgba(0,0,0,0.3);
		height: 102px;
		display: flex;
	}

	.switch{
		flex:0 0 52px;
	}

	.img{
		margin-left: 5px;
		height: 75px;
		width: 75px;
		flex: 0 0 85px;
        margin-top: 15px;
	}

	.inforight{
		margin-left: 5px;
		flex:1;
        padding-top: 10px;
	}
	.inforight ul{
		padding-left: 0px;
	}
	.inforight li{
		list-style: none;
		display: inline-block;
	}

	.inforight h4{
		color: #0094ff;
		font-size: 14px;
	}

	.bottom li:first-child{
		color:red;
		margin-right: 10px;
	}

	.bottom li:last-child{
		margin-left: 10px;
	}

	#total{
		height: 100px;
		background-color: rgba(0,0,0,0.1);
		display: flex;
		padding: 5px;;
	}

	#total ul {
	 padding-left: 0px;
	}
	#total li{
		list-style: none;
		font-size: 14px;
	}

	#button{
		flex:0 0 60px;
		margin: 30px 0 0 0 ;
	}

	.desc{

		flex:1;
	}
</style>